<template>
  <div class="notification-center">
    <button 
      class="notification-trigger"
      @click="showNotifications = !showNotifications"
    >
      <i class="icon-bell" />
      <span 
        v-if="unreadCount"
        class="unread-badge"
      >
        {{ unreadCount }}
      </span>
    </button>

    <div 
      v-if="showNotifications"
      class="notifications-panel"
    >
      <div class="panel-header">
        <h3>通知</h3>
        <button 
          v-if="hasUnread"
          @click="markAllAsRead"
        >
          全部标记为已读
        </button>
      </div>

      <div class="notifications-list">
        <div 
          v-for="notification in notifications"
          :key="notification._id"
          class="notification-item"
          :class="{ unread: !notification.read }"
          @click="openNotification(notification)"
        >
          <Avatar :user="notification.from" size="small" />
          <div class="notification-content">
            <div class="notification-message">
              {{ formatMessage(notification) }}
            </div>
            <div class="notification-time">
              {{ formatTime(notification.createdAt) }}
            </div>
          </div>
          <button 
            v-if="!notification.read"
            class="mark-read"
            @click.stop="markAsRead(notification)"
          >
            标记为已读
          </button>
        </div>
      </div>

      <div 
        v-if="notifications.length === 0"
        class="empty-state"
      >
        暂无通知
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useNotificationStore } from '../../stores/notification';
import Avatar from '../Common/Avatar.vue';

const notificationStore = useNotificationStore();
const showNotifications = ref(false);

const notifications = computed(() => notificationStore.notifications);
const unreadCount = computed(() => notificationStore.unreadCount);
const hasUnread = computed(() => unreadCount.value > 0);

const formatMessage = (notification) => {
  const templates = {
    'card:mention': `${notification.from.username} 在卡片中提到了你`,
    'card:due': `卡片 "${notification.card.title}" 即将到期`,
    'board:invite': `${notification.from.username} 邀请你加入看板`,
    'card:move': `${notification.from.username} 移动了卡片 "${notification.card.title}"`
  };
  
  return templates[notification.type] || notification.message;
};

const formatTime = (timestamp) => {
  const date = new Date(timestamp);
  return date.toLocaleString();
};

const openNotification = (notification) => {
  // 根据通知类型执行相应操作
  if (notification.type === 'card:mention') {
    // 打开相应的卡片
  } else if (notification.type === 'board:invite') {
    // 处理邀请
  }
  
  if (!notification.read) {
    markAsRead(notification);
  }
};

const markAsRead = async (notification) => {
  await notificationStore.markAsRead(notification._id);
};

const markAllAsRead = async () => {
  await notificationStore.markAllAsRead();
};
</script>

<style scoped>
.notification-center {
  position: relative;
}

.notification-trigger {
  position: relative;
  padding: 8px;
}

.unread-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #EB5A46;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
}

.notifications-panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: 320px;
  background: white;
  border-radius: 3px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  z-index: 1000;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #DFE1E6;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  border-bottom: 1px solid #DFE1E6;
  cursor: pointer;
}

.notification-item:hover {
  background-color: #F4F5F7;
}

.notification-item.unread {
  background-color: #E4F0F6;
}

.notification-content {
  margin-left: 8px;
  flex: 1;
}

.notification-time {
  font-size: 12px;
  color: #5E6C84;
  margin-top: 4px;
}

.empty-state {
  padding: 24px;
  text-align: center;
  color: #5E6C84;
}
</style> 